<template>
  <div class="todo-footer" v-show="total">
    <h3>底部</h3>
        <input type="checkbox" name="" id="finish" v-model="isAll">
        <label for="finish">已完成{{doneTotal}}/全部{{total}}</label>
        <button class="btn" @click="clearAll">清除已完成数据</button>
  </div>
</template>

<script>
export default {
    name: 'MyFooter',
    props: ['todos','checkAllTodo','clearAllTodo'],
  //计算属性
  computed: {
      total() {
          return this.todos.length
      },
     // 计算已完成数量
      doneTotal() {
          /* const x = this.todos.reduce((pre,curr) =>{
              return pre + (curr.done ? 1 : 0)
          },0) */

          // 简写
          return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0),0)
      },
      isAll: {
        get() {
          return this.doneTotal === this.total & this.total > 0
        },
        set(value) {
          this.checkAllTodo(value)
        }
      }
  },
  //方法集合
  methods: {
    clearAll() {
      this.clearAllTodo()
    }
  },
  //挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
.todo-footer {
    width: 320px;
    border: 1px solid red;
    margin-left: 32px;
}
/*@import url(); 引入公共css类*/
.btn {
    float: right;
}
</style>